<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>html2canvas example</title>
    <link rel="stylesheet" href="page/followup/css/common/common.css" />
<link rel="stylesheet" href="../../css/mabc/mabcDetailInfo.css" />
<link rel="stylesheet" href="../../css/mabc/report1.css" />
    <script type="text/javascript" src="html2canvas.js"></script>
</head>
<script type="text/javascript">
function takeScreenshot() {
  console.log('test');
    html2canvas(document.getElementById('view'), {
        onrendered: function(canvas) {
            document.body.appendChild(canvas);
        },
         width: 300,
         height: 300
    });
}
</script>
<body>
    <div id="view" style="background:url(test.jpg) 50%; width: 700px; height: 500px;">
        <input type="button" value="截图" onclick="takeScreenshot()">
        <div class="bb-report" id="bb-report"><div class="report" style="width:calc(4 * 8rem + 2rem)"><div class="bb-report-label"><div class="bb-bar-x-name">评估维度</div><div class="bb-bar-y-name">评估分数</div><div class="bb-labels"><div class="labels-name"><span class="labels-bc" style="background:#30d9ba"></span><span style="color:#30d9ba">正常</span></div><div class="labels-name"><span class="labels-bc" style="background:#ff0000"></span><span style="color:#ff0000">异常</span></div></div></div><div class="bb-xAxis"><div class="bb-x-item" style="width:calc(100% / 8 - 1.2rem)"><div class="bb-x-name" style="color:rgb(90,90,90)">睡眠焦虑</div><div class="bb-x-bc" style="background:#ff0000; height: calc(100%* 8/25);"><div class="bb-x-val">8</div><div class="bb-x-val-name" style="color:#ff0000">异常</div></div></div><div class="bb-x-item" style="width:calc(100% / 8 - 1.2rem)"><div class="bb-x-name" style="color:rgb(90,90,90)">夜醒</div><div class="bb-x-bc" style="background:#ff0000; height: calc(100%* 8/25);"><div class="bb-x-val">8</div><div class="bb-x-val-name" style="color:#ff0000">异常</div></div></div><div class="bb-x-item" style="width:calc(100% / 8 - 1.2rem)"><div class="bb-x-name" style="color:rgb(90,90,90)">异态睡眠</div><div class="bb-x-bc" style="background:#ff0000; height: calc(100%* 18/25);"><div class="bb-x-val">18</div><div class="bb-x-val-name" style="color:#ff0000">异常</div></div></div><div class="bb-x-item" style="width:calc(100% / 8 - 1.2rem)"><div class="bb-x-name" style="color:rgb(90,90,90)">睡眠障碍性呼吸</div><div class="bb-x-bc" style="background:#ff0000; height: calc(100%* 8/25);"><div class="bb-x-val">8</div><div class="bb-x-val-name" style="color:#ff0000">异常</div></div></div><div class="bb-x-item" style="width:calc(100% / 8 - 1.2rem)"><div class="bb-x-name" style="color:rgb(90,90,90)">睡眠阻抗</div><div class="bb-x-bc" style="background:#ff0000; height: calc(100%* 15/25);"><div class="bb-x-val">15</div><div class="bb-x-val-name" style="color:#ff0000">异常</div></div></div><div class="bb-x-item" style="width:calc(100% / 8 - 1.2rem)"><div class="bb-x-name" style="color:rgb(90,90,90)">入睡延迟</div><div class="bb-x-bc" style="background:#30d9ba; height: calc(100%* 2/25);"><div class="bb-x-val">2</div><div class="bb-x-val-name" style="color:#30d9ba">正常</div></div></div><div class="bb-x-item" style="width:calc(100% / 8 - 1.2rem)"><div class="bb-x-name" style="color:rgb(90,90,90)">睡眠持续时间</div><div class="bb-x-bc" style="background:#30d9ba; height: calc(100%* 5/25);"><div class="bb-x-val">5</div><div class="bb-x-val-name" style="color:#30d9ba">正常</div></div></div><div class="bb-x-item" style="width:calc(100% / 8 - 1.2rem)"><div class="bb-x-name" style="color:rgb(90,90,90)">以及日间困倦</div><div class="bb-x-bc" style="background:#30d9ba; height: calc(100%* 4/25);"><div class="bb-x-val">4</div><div class="bb-x-val-name" style="color:#30d9ba">正常</div></div></div><div class="bb-y-item">&nbsp;</div><font class="fa fa-angle-right"></font></div><div class="bb-yAxis"><div class="bb-y-item" style="height: calc(100% / 5);"><span>&nbsp;</span></div><div class="bb-y-item" style="height: calc(100% / 5);"><span>20</span></div><div class="bb-y-item" style="height: calc(100% / 5);"><span>15</span></div><div class="bb-y-item" style="height: calc(100% / 5);"><span>10</span></div><div class="bb-y-item" style="height: calc(100% / 5);"><span>5</span></div><font class="fa fa-angle-up"></font></div></div></div>
    </div>
</body>

</html>